<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")

  cvs.width = 430;
  cvs.height = 430;

  const ctx = cvs.getContext("2d")

  ctx.moveTo(35, 22);
  ctx.lineTo(394, 22);
  ctx.lineTo(212, 202);
  ctx.lineTo(35, 22);
  ctx.closePath();
  ctx.fillStyle = "#eed256";
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.lineJoin = "bevel";
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(35, 22);
  ctx.lineTo(35, 380);
  ctx.lineTo(212, 202);
  ctx.lineTo(35, 22);
  ctx.fillStyle = "#d85136";
  ctx.lineWidth = 2;
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(35, 380);
  ctx.lineTo(216, 380);
  ctx.lineTo(302, 290);
  ctx.lineTo(124, 290);
  ctx.lineTo(35, 380);
  ctx.fillStyle = "#ebae63";
  ctx.lineWidth = 2;
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(213, 202);
  ctx.lineTo(124, 290);
  ctx.lineTo(302, 290);
  ctx.lineTo(213, 202);
  ctx.fillStyle = "#e2cbaf";
  ctx.lineWidth = 2;
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(213, 202);
  ctx.lineTo(305, 112);
  ctx.lineTo(394, 200);
  ctx.lineTo(302, 290);
  ctx.lineTo(213, 202);
  ctx.fillStyle = "#9ac043";
  ctx.lineWidth = 2;
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(305, 112);
  ctx.lineTo(394, 22);
  ctx.lineTo(394, 200);
  ctx.lineTo(305, 112);
  ctx.fillStyle = "#54b1bb";
  ctx.lineWidth = 2;
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(394, 200);
  ctx.lineTo(394, 380);
  ctx.lineTo(216, 380);
  ctx.lineTo(394, 200);
  ctx.fillStyle = "#764c82";
  ctx.lineWidth = 2;
  ctx.fill();
  ctx.stroke();


  
</script>
</html>